<!-- 会员中心 -->
<template>
	<view>
		<u-navbar :isFixed="true" title="会员中心" :background="{backgroundColor:'#2A2928'}" title-color="#FFFFFF" back-icon-color="#FFFFFF" :borderBottom="false"></u-navbar>
		<view class="top">
			<view class="flex_bet">
				<view class="flex">
					<view>
						<image class="avatar" :src="users.avatar"></image>
						<view class="tags">{{users.sign}}</view>
					</view>
					<view>
						<view class="name">{{users.nickname}}</view>
						<view class="phone">{{users.mobile}}</view>
					</view>
				</view>
				<view class="flex other">
					<navigator hover-class="none" url="/personal/vipState">会员说明</navigator> <view>|</view><navigator hover-class="none" url="/personal/vipRecord">开通记录</navigator>
				</view>
			</view>
		</view>
		 <scroll-view scroll-x="true" class="swiper">
			<block v-if="users.memberList.length<1">
				<view class="card common">
					<view class="title">普通会员</view>
					<view class="line"></view>
					<view class="state">开通VIP至尊会员获取更多商机</view>
				</view>
			</block>
			
			<block v-for="(item,index) in  users.memberList" :key="index">
				<block v-if="users.memberList.length==1">
					<view class="card" style="width:94vw" :class="item.level==2?'supply':(item.level==3?'extreme':'merge')">
						<view class="title">{{item.name}}</view>
						<view class="line"></view>
						<view class="state">到期时间:{{item.endtime}}</view>
					</view>
				</block>
				<block v-else>
					<view class="card" :class="item.level==2?'supply':(item.level==3?'extreme':'merge')">
						<view class="title">{{item.name}}</view>
						<view class="line"></view>
						<view class="state">到期时间:{{item.endtime}}</view>
					</view>
				</block>
			</block>
		</scroll-view>
		<view class="wrap">
			<view class="title">{{users.memberList.length > 0 ?'当前会员权益':'升级后会员权益'}}</view>
			<view class="grid">
				<view class="item" v-for="item in users.legalright" :key="item.id">
					<image class="img" :src="item.image"></image>
					<view class="name">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="book">
			<view class="title">升级宝典</view>
			<block v-for="(item,index) in users.book" :key="index">
				<view class="flex_bet_align item">
					<view class="flex_align">
						<image :src="item.image"></image>
						<view>
							<view class="name">{{item.name}}</view>
							<view class="state">{{item.subtitle}}</view>
						</view>
					</view>
					<navigator :url="'/personal/buyVip?id='+item.id" hover-class="none" class="btn">开通</navigator>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	var _this,shak;
	export default {
		data() {
			return {
				users:{
					memberList:[1]
				}
			}
		},
		onLoad(options) {
			_this = this
			_this.getdata()
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			_this.getdata()
		},
		methods: {
			//内层刷新这层
			isonshow() {
				_this.getdata()
			},
			// 获取数据
			getdata() {
				_this.$api.get("getmembersign", {}).then(data => {
					_this.users = data
				});
			},
			
			// 防抖点击
			click_shake(fn){
				if(!_this.shake){
					fn && typeof fn === 'function' && fn()
					_this.shake=true
					setTimeout(function(){
						_this.shake=false
					},500)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F6F6F6;
		font-family: PingFang SC;
	}
	.top{
		height: 330rpx;
		color:#FFFFFF;
		background-color: #2A2928;
		padding:0 26rpx;
		.avatar{
			width: 114rpx;
			height: 114rpx;
			border-radius: 50%;
			margin-right:20rpx;
			background-color: #EEEEEE;
		}
		.tags{
			width: 110rpx;
			height: 34rpx;
			background: #f6dcc2;
			border-radius: 18rpx;
			font-size: 20rpx;
			font-weight: 500;
			text-align: center;
			color: #2a2928;
			position: relative;
			top:-20rpx;
		}
		.name{
			font-size: 36rpx;
			font-weight: 700;
			margin-top: 10rpx;
			max-width: 300rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.phone{
			font-size: 24rpx;
			font-weight: 700;
			margin-top: 10rpx;
		}
		.other{
			margin-top:10rpx;
			view,navigator{
				font-size: 24rpx;
				font-weight: 700;
				color: #ffffff;
				margin-left:7rpx;
			}
		}
		
	}
	.swiper{
		margin-top: -140rpx;
		padding: 0 0 0 3vw;
		overflow-x: auto;
		width: 100%;
		white-space: nowrap;
		box-sizing: border-box;
		word-break: break-all;
	}
	.card{
		display: inline-block;
		width: 640rpx;
		height: 220rpx;
		border-radius: 16rpx;
		padding:48rpx 44rpx;
		position: relative;
		z-index: 10;
		overflow: hidden;
		margin-right: 3vw;
		flex-direction: column;
		&.common{
			width: 94vw;
			margin-right: 0;
			background: #CDCED6;
			.line{
				width: 114rpx;
				margin:10rpx 0;
				border-top:2px solid transparent;
				border-image:linear-gradient(270deg,#cdced6, #75788e) 20 0;
			}
			&:after {
			  content: "";
			  width: 100%;
			  height: 500%;
			  position: absolute;
			  left: 70%;
			  top: -100%;
			  transform:rotate(15deg);
			  background-color: #C8C9D3;
			  z-index: 5;
			}
		}
		&.supply{
			background: #ECCF9D;
			.line{
				width: 114rpx;
				margin:10rpx 0;
				border-top:2px solid transparent;
				border-image:linear-gradient(270deg, #e2c28e, #c7b390) 20 0;
			}
			&:after {
			  content: "";
			  width: 100%;
			  height: 500%;
			  position: absolute;
			  left: 70%;
			  top: -100%;
			  transform:rotate(15deg);
			  background-color:#EACC9A;
			  z-index: 5;
			}
		}
		&.extreme{
			background: #F3D6BA;
			.line{
				width: 114rpx;
				margin:10rpx 0;
				border-top:2px solid transparent;
				border-image:linear-gradient(270deg, #e2c28e, #c7b390) 20 0;
			}
			&:after {
			  content: "";
			  width: 100%;
			  height: 500%;
			  position: absolute;
			  left: 70%;
			  top: -100%;
			  transform:rotate(15deg);
			  background-image:linear-gradient(90deg,#EAC3A1 0,#E5BA94 30%,#E5BA94 100%);
			  z-index: 5;
			}
		}
		&.merge{
			background: #F3D6BA;
			.line{
				width: 114rpx;
				margin:10rpx 0;
				border-top:2px solid transparent;
				border-image:linear-gradient(270deg, #e2c28e, #c7b390) 20 0;
			}
			&:after {
			  content: "";
			  width: 100%;
			  height: 500%;
			  position: absolute;
			  left: 70%;
			  top: -100%;
			  transform:rotate(15deg);
			  background-image:linear-gradient(90deg,#F3D6BA 0,#E5BA94 30%,#E5BA94 100%);
			  z-index: 5;
			}
		}
		.title{
			font-size: 40rpx;
			font-weight: 700;
			color: #2a2928;
		}
		.state{
			font-size: 24rpx;
			font-weight: 700;
			color: #2a2928;
		}
	}
	.wrap{
		background-color: #FFFFFF;
		padding:40rpx 0 30rpx 0;
		margin-bottom: 26rpx;
		border-bottom: 13rpx solid #F6F6F6;
		.title{
			font-size: 32rpx;
			font-weight: 700;
			margin-left:30rpx;
			color: #000000;
		}
		.grid{
			display: grid;
			padding-top:28rpx;
			grid-template-columns: repeat(4,25%);
			.item{
				margin:15rpx 0;
				text-align: center;
				.img{
					width: 120rpx;
					height: 120rpx;
					margin:0 auto;
					background: #fcead8;
					border-radius: 60rpx;
				}
				.name{
					width: 120rpx;
					margin:0 auto;
					text-align: center;
					margin-top:10rpx;
					font-size: 24rpx;
					font-weight: 700;
					color: #000000;
				}
			}
		}
	}
	.book{
		width: 750rpx;
		padding:36rpx 24rpx 2rpx 42rpx;
		background: #ffffff;
		image{
			width: 80rpx;
			height: 80rpx;
			border-radius: 16rpx;
			margin-right:20rpx;
		}
		.title{
			font-size: 32rpx;
			font-weight: 700;
			color: #000000;
			margin-bottom: 28rpx;
		}
		.item{
			margin-bottom: 38rpx;
			.name{
				font-size: 28rpx;
				font-weight: 700;
				color: #000000;
				margin-bottom: 4rpx;
			}
			.state{
				font-size: 24rpx;
				font-weight: 500;
				color: #000000;
			}
			.btn{
				width: 126rpx;
				height: 58rpx;
				background: linear-gradient(180deg,#f6dcc2, #e6bc97);
				border-radius: 30rpx;
				font-size: 24rpx;
				font-weight: 700;
				text-align: center;
				line-height: 58rpx;
				color: #6e3a0c;
			}
		}
	}
</style>
